<template>
  <div class="parent">
    <h2>使用 $attrs 向孙组件传递数据</h2>
    <p>{{ a }}, {{ b }}, {{ c }}, {{ d }}</p>
    <button @click="a++">a+</button>
    <button @click="b++">b+</button>
    <button @click="c++">c+</button>
    <button @click="d++">d+</button>
    <sub-comp v-bind="{ a, b, c, d }" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SubComp from "./SubComp.vue";
const a = ref(1);
const b = ref(2);
const c = ref(3);
const d = ref(4);
</script>

<style scoped>
@import "../common.css";
</style>
